<!--评估任务管理 -->
<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <el-row :gutter="10" class="manage_top">
          <el-row :gutter="10" class="manage_top_1">
            <p>所属业务</p>
            <el-radio-group v-model="queryParams.evaluateQuestBusiness" size="medium" @input="onInput">
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button :label="item.dictValue" v-for="(item,index) in businessList" :key="index">{{item.dictValue}}</el-radio-button>
            </el-radio-group>
          </el-row>
          <el-row :gutter="10" class="manage_top_1">
            <p>评估周期</p>
            <el-radio-group v-model="queryParams.evaluateQuestCycle" size="medium" @input="onInput">
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button :label="item.dictValue" v-for="(item,index) in cycleList" :key="index">{{item.dictValue}}</el-radio-button>
            </el-radio-group>
          </el-row>
        </el-row>
        <el-row :gutter="10" class="mb8 manage_middle">
          <p>共找到评估任务<span>{{nums.total}}</span>项，在执行<span>{{nums.executionSum}}</span>项</p>
          <el-col :span="1.5">
            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click.native="addClick('add','')">新增评估任务</el-button>
          </el-col>
        </el-row>
        <div v-if="taskList && taskList.length > 0">
          <el-row :gutter="10" class="task_top mb20" v-for="(item,index) in taskList" :key="index" @click.native="addClick('detail',item.id)">
            <div style="display: flex;justify-content: space-between">
              <div class="task_top_1">
                <p><svg-icon icon-class="peoples" /> {{item.evaluateQuestTitle}}</p>
                <span>（描述：{{item.evaluateQuestContent}}）</span>
              </div>
              <div :style="{color:item.evaluateQuestStatus === '暂存' ? '#909399' : '#409EFF'}">{{item.evaluateQuestStatus}}</div>
            </div>
            <div class="task_top_2">
              <span>业务：{{item.evaluateQuestBusiness}}</span>
              <span>评估任务：{{item.evaluateQuestIndexSum}}项</span>
              <span>评估周期：{{item.evaluateQuestCycle}} <span v-if="item.evaluateQuestTriggerMonth && item.evaluateQuestTriggerHours">（每月{{item.evaluateQuestTriggerMonth}}号{{item.evaluateQuestTriggerHours}}时）</span></span>
              <span>开始时间：{{item.startTime}}</span>
              <span>评估人员：{{item.evaluateExpertNames}}</span>
            </div>
          </el-row>
          <div style="height: 50px;display: flex;align-items: center;justify-content: center;">
            <el-pagination :page-size="queryParams.pageSize" background layout="prev, pager, next" :total="nums.total" @current-change="onPageChange"></el-pagination>
          </div>
        </div>
        <div v-else>
          <el-empty description="暂无数据"></el-empty>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { queryBusiness, queryCycle,assessmentTaskManagement } from '@/api/eval'
  import { openLoading,closeLoading } from '@/utils'
  export default {
    name: "User",
    dicts: ["sys_normal_disable", "sys_user_sex"],
    data() {
      return {
        nums:{
          total:0,
          executionSum:0,//在执行的有多少条
        },
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 5,
          evaluateQuestBusiness:'',
          evaluateQuestCycle:'',
        },
        taskList:[],//评估任务分页查询
        cycleList:[],//周期查询
        businessList:[],//分类
      };
    },
    watch: {},
    created() {
      queryCycle().then(({code,data}) => {
        this.cycleList = data
      })
      queryBusiness().then(({code,data}) => {
        this.businessList = data
      })
      this.queryPageList()
    },
    methods: {
      addClick(type,id) {
        this.$router.push({
          path:"manage/detail",
          query:{
            type,
            id
          }
        })
      },
      onInput(e) {
        this.queryPageList()
      },
      queryPageList() {
        openLoading()
        assessmentTaskManagement(this.queryParams).then(({code,rows,total}) => {
          this.taskList = rows
          console.log('this.taskList',this.taskList)
          this.nums.total = total
          if (this.taskList.length > 0) {
            this.nums.executionSum = this.taskList[0].executionSum
          }else {
            this.nums.executionSum = 0
          }
          closeLoading()
        }).catch(err => {
          closeLoading()
        })
      },
      onPageChange(e) {
        this.queryParams.pageNum = e
        this.queryPageList()
      },
    },
  };
</script>

<style lang="scss" scoped>
  ::v-deep .el-dialog__header {
    background-color: #354161;
    padding-bottom: 20px;
  }

  ::v-deep .el-dialog__footer {
    background-color: #f1f2f4;
    padding-top: 20px;
  }

  ::v-deep .el-dialog__title {
    color: white;
  }

  ::v-deep .czlialog {
    margin-top: 20vh;
  }

  .flex-container {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .inner-container {
    width: 80%;
  }

  .info-row {
    height: 40px;
  }

  .flex-row {
    display: flex;
    align-items: center;
  }

  .label {
    width: 30%;
    text-align: right;
    margin-right: 10px;
    font-weight: 900;
  }

  .value {
    width: 70%;
  }

  /* Assuming el-input is a custom component, you might need additional styling */
  .input-field {
    width: 70%;
  }

  /* 头部 */
  .task_top {
    height: 150px;
    cursor: pointer;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.12), 0 2px 5px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    padding: 20px;
  }

  .task_top_1 {
    height: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .task_top_1 p {
    font-size: 20px;
    color: rgb(40, 121, 228);
    font-family: "微软雅黑";
    font-weight: bold;
  }

  .task_top_1 span {
    font-size: 15px;
    color: #bbb;
    font-family: "微软雅黑";
    margin-left: 20px;
    transform: translateY(3px);
  }

  .task_top_2 {
    margin-top: 10px;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 15px;
  }

  ::v-deep .el-select.el-select--medium {
    width: 100%;
  }

  ::v-deep .blue label {
    color: blue;
  }

  .manage_top {
    height: 150px;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.12), 0 2px 5px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    padding: 20px;
  }

  .manage_top_1 {
    display: flex;
    align-items: center;
  }

  .manage_top_1 p {
    height: 20px;
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    border-left: 3px solid #354161;
  }

  ::v-deep .manage_top_1 label {
    margin-right: 10px;
  }

  ::v-deep .manage_top_1 span {
    border-left: 1px solid #dcdfe6;
  }

  .manage_middle {
    display: flex;
    align-items: cneter;
    justify-content: flex-start;
  }

  .manage_middle p {
    font-size: 15px;
  }

  .manage_middle p span {
    font-size: 15px;
    font-weight: bolder;
    color: blue;
  }

  .manage_middle .el-col {
    margin-left: 20px;
    display: flex;
    align-items: center;
  }
</style>
